<template>
	<div>
		<div>
			<div class="form-row" >
					<div class="form-month-box">
						<a-form-item label="模板">
						</a-form-item>
					</div>
					<div class="form-form-box">
						<a-form-item label="月收入">
							<a-input-number v-model:value="income"/>
						</a-form-item>
					</div>
					<div class="form-form-box">
						<a-form-item label="月起征线">
							<a-input-number v-model:value="starting"/>
						</a-form-item>
					</div>
					<div class="form-form-box">
						<a-form-item label="专项扣除">
							<a-input-number v-model:value="deduction"/>
						</a-form-item>
					</div>
					<div class="form-form-box">
						<a-form-item label="附加扣除">
							<a-input-number v-model:value="additional"/>
						</a-form-item>
					</div>
					<div class="form-btn-box">
						<a-form-item>
							<a-button type="primary" @click="autoMonthDataCalculation" v-if="!showMonth">计算</a-button>
							<a-button type="primary" @click="autoMonthData" v-else>设置</a-button>
						</a-form-item>
					</div>
					<div class="form-btn1-box">
						<a-form-item>
							<a-button type="primary" @click="switchMonth" v-if="showMonth">固定月收入</a-button>
							<a-button type="primary" @click="switchMonth" v-else>动态月收入</a-button>
						</a-form-item>
					</div>
					<div class="form-btn-box">
						<a-form-item>
							<a-button type="primary" @click="doCalculation" v-if="showMonth">计算</a-button>
						</a-form-item>
					</div>
			</div>
			<template v-if="showMonth">
				<div class="form-row" v-for="e in formList">
						<div class="form-month-box">
							<a-form-item :label="e.month + '月'">
							</a-form-item>
						</div>
						<div class="form-form-box">
							<a-form-item label="月收入">
								<a-input-number v-model:value="e.income"/>
							</a-form-item>
						</div>
						<div class="form-form-box">
							<a-form-item label="月起征线">
								<a-input-number v-model:value="e.starting"/>
							</a-form-item>
						</div>
						<div class="form-form-box">
							<a-form-item label="专项扣除">
								<a-input-number v-model:value="e.deduction"/>
							</a-form-item>
						</div>
						<div class="form-form-box">
							<a-form-item label="附加扣除">
								<a-input-number v-model:value="e.additional"/>
							</a-form-item>
						</div>
				</div>
			</template>
		</div>
		<div>
			<a-table size="small" :pagination="false" :dataSource="dataSource" :columns="columns" >
				<template #bodyCell="{ text, record, index, column }">
					<template v-if="column.dataIndex === 'month'">
						{{ record.month }} 月
					</template>
					<template v-if="column.dataIndex === 'taxMoney'">
						<a-popover title="计算过程">
							<template #content>
								<div v-for="e in record.taxArr">
									{{ e.income }} * {{ e.pie }} = {{ e.outcome }}
								</div>
							</template>
							<a-button type="link">{{ record.taxMoney }}</a-button>
						</a-popover>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';

interface TableState {
	month: number;
	income: number;
	starting: number;
	deduction: number;
	additional: number;
	monthMoney: number;
	accumulateMonth: number;
	taxArr: TaxState[];
	taxMoney: number;
	accumulateTax: number;
}
interface TaxState {
	pie: number;
	income: number;
	outcome:number
}

interface FormState {
	month: number;
	income: number;
	starting: number;
	deduction:number;
	additional:number;
}

const showMonth = ref(false)

const  columns = ref([
	{  title: '月份', dataIndex: 'month', key: 'month', align: "center"},
	{  title: '收入', dataIndex: 'income', key: 'income', align: "center"},
	{  title: '月起征线', dataIndex: 'starting', key: 'starting', align: "center"},
	{  title: '专项扣除', dataIndex: 'deduction', key: 'deduction', align: "center"},
	{  title: '附加扣除', dataIndex: 'additional', key: 'additional', align: "center"},
	{  title: '应纳税', dataIndex: 'monthMoney', key: 'monthMoney', align: "center"},
	{  title: '累积应纳税额', dataIndex: 'accumulateMonth', key: 'accumulateMonth', align: "center"},
	{  title: '当月税额', dataIndex: 'taxMoney', key: 'taxMoney', align: "center"},
	{  title: '累积纳税', dataIndex: 'accumulateTax', key: 'accumulateTax', align: "center"},
])
const dataSource = ref<TableState[]>()
const income = ref<number>(0)
const starting = ref<number>(5000)
const deduction = ref<number>(0)
const additional = ref<number>(0)

const formList = ref<FormState[]>()

function getTaxMoney(total:number, money:number){
	let list = []
	let temporaryMoney = money
	if (total < 36000 && total >=0) {
		let pie = 0.03
		let maxMoney = 36000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}
	if (total < 144000 && total >= 36000) {
		let pie = 0.1
		let maxMoney = 144000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}

	if (total < 300000 && total >= 144000) {
		let pie = 0.20
		let maxMoney = 300000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}
	if (total < 420000 && total >= 300000) {
		let pie = 0.25
		let maxMoney = 420000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}
	if (total < 660000 && total >= 420000) {
		let pie = 0.30
		let maxMoney = 660000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}
	if (total < 960000 && total >= 660000) {
		let pie = 0.35
		let maxMoney = 660000
		if (total + money < maxMoney) {
			temporaryMoney = money
			money = 0
		} else {
			temporaryMoney = maxMoney - total
			money = total + money - maxMoney
			total = maxMoney
		}
		list.push({
			pie: pie,
			income: temporaryMoney,
			outcome: temporaryMoney * pie
		})
	}
	if (money > 0) {
		let pie = 0.45
		list.push({
			pie: pie,
			income: money,
			outcome: money * pie
		})
	}
	return list
}

function autoMonthData(){
	let monthList = [...formList.value || []]
	monthList.forEach((e: any) => {
		e.income = income.value
		e.starting = starting.value
		e.deduction = deduction.value
		e.additional = additional.value
	})
	formList.value = monthList
}
function autoMonthDataCalculation(){
	autoMonthData()
	doCalculation()
}

function doCalculation(){
	let accumulateMonery = 0
	let accumulateTax = 0
	let list = []
	let monthList = [...formList.value || []]
	for(let i = 0; i < monthList.length; i++){
		let monthRow = monthList[i]
		let monthMoney = monthRow.income - monthRow.starting - monthRow.deduction - monthRow.additional
		if (monthMoney > 0) {
			let tax = getTaxMoney(accumulateMonery, monthMoney);
			accumulateMonery = accumulateMonery + monthMoney
			let taxMoney = 0
			for(let j = 0; j < tax.length; j++) {
				taxMoney = taxMoney + tax[j].outcome
			}
			accumulateTax = accumulateTax + taxMoney
			let row:TableState = {
				month: i + 1,
				income: monthRow.income,
				starting: monthRow.starting,
				deduction: monthRow.deduction,
				additional: monthRow.additional,
				monthMoney: monthMoney,
				accumulateMonth: accumulateMonery,
				taxArr: tax,
				taxMoney: taxMoney,
				accumulateTax: accumulateTax
			}
			list.push(row)
		} else {
			let row:TableState = {
				month: i + 1,
				income: monthRow.income,
				starting: monthRow.starting,
				deduction: monthRow.deduction,
				additional: monthRow.additional,
				monthMoney: monthMoney,
				accumulateMonth: accumulateMonery,
				taxArr: [],
				taxMoney: 0,
				accumulateTax: accumulateTax
			}
			list.push(row)
		}
	}
	dataSource.value = list
}
function initFormState(){
	let list:FormState[] = []
	for(let i = 0; i < 12; i++){
		list.push({
			month: i + 1,
			income: 0,
			starting: 0,
			deduction: 0,
			additional: 0,
		})
	}
	formList.value = list
}
function switchMonth(){
	showMonth.value = !showMonth.value 
}
onMounted(() => {
	initFormState()
})
</script>
<style scoped>
.form-row{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.form-month-box{
	width: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.form-form-box{
	width: 200px;
	display: flex;
	justify-content: flex-start;
	align-items: center;

}
.form-btn-box{
	width: 100px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.form-btn1-box{
	width: 150px;
	display: flex;
	justify-content: flex-start;
	align-items: center;

}
</style>

